<template>
  <div>
    <div class="orderSearch-wrapper">
      <div class="bigTitle">消化月动态</div>
      <div style="text-align: right">
        <time-picker ref="timeRef" @change="handleChange"/>
        <el-radio-group size="mini" v-model="searchType" style="margin-left: 10px" @change="handleTrend">
          <el-radio-button label="需求分析"></el-radio-button>
          <el-radio-button label="性质分析"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <order-bar class="line" :type="currentType" :source="trendData"/>
  </div>
</template>

<script>
import {orderAnalysis} from "@/api/services/dashboard.service";
import orderBar from './order-bar'
import timePicker from './time-picker'

export default {
  name: "orderTrend",
  components: {orderBar, timePicker},
  data() {
    return {
      trendData: [],
      searchType:'需求分析',
      params: {
        type: '',
        year: '',
        month: '',
      }
    }
  },
  computed: {
    currentType() {
      return this.params.type
    }
  },
  mounted() {
    this.$nextTick(() => {
      let {year, moment, allMoment} = this.$refs.timeRef.initTime()
      this.params.year = year
      this.params.month = moment === 99 ? allMoment : moment
      this._orderAnalysis()
    })

  },
  methods: {
    // 订单趋势
    handleTrend(data) {
      this.searchType = data
      this._orderAnalysis()
    },
    handleChange({year, moment, allMoment}) {
      this.params.year = year
      this.params.month = moment === 99 ? allMoment : moment
      this._orderAnalysis()
    },
    _orderAnalysis() {
      let state = {'需求分析':1, '性质分析':2,}
      this.params.type = state[this.searchType]
      orderAnalysis(this.params).then(res => {
        this.trendData = res.data
      })
    },
  }
}
</script>

<style lang="less" scoped>

.orderSearch-wrapper {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;

  .bigTitle {
    border-bottom: none;
    padding: 8px 0;
    color: #3A71A8;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
  }

}


.line {
  padding-top: 10px;
}
</style>
